<template>
  <div class="pages-contain-view">
    <el-card v-loading="chartLoading">
      <div class="chart-list-container flex_justify_space_around">
        <div id="stackedLineChart" :style="{width: '100%', height: '350px'}"></div>
      </div>
    </el-card>
    <el-card v-loading="chartLoading" style="margin-top:10px">
      <div class="chart-list-container flex_justify_space_around">
        <div id="barLineChart" :style="{width: '100%', height: '350px'}"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { lineCharts } from "@/api/chart";
let legend = {
  data: []
};
export default {
  data() {
    return {
      chartLoading: false,
      //叠加折线图
      stackedLineChart: {
        tooltip: {
          trigger: "axis"
        },
        legend: legend,
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: []
      },
      //柱状图
      barLineChart: {
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: legend,
        calculable: true,
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: []
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: []
      }
    };
  },
  mounted() {
    this.getLineCharts();
  },
  methods: {
    async getLineCharts() {
      this.chartLoading = true;
      let res = await lineCharts();
      if (res) {
        this.chartLoading = false;
        //叠加折线图
        this.stackedLineChart.series = res.stackedLine;
        this.stackedLineChart.legend.data = res.stackedLine;
        this.stackedLineChart.xAxis.data = res.xAxis;
        //柱状图
        this.barLineChart.series = res.barLine;
        this.barLineChart.legend.data = res.barLine;
        this.barLineChart.xAxis[0].data = res.xAxis;

        let stackedLineChart = this.Ech.init(
          document.getElementById("stackedLineChart")
        );
        stackedLineChart.setOption(this.stackedLineChart);
        let barLineChart = this.Ech.init(
          document.getElementById("barLineChart")
        );
        barLineChart.setOption(this.barLineChart);
      }
    }
  }
};
</script>

<style scoped>
</style>